<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Home Version 4</title>
<link rel="icon" type="image/png" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!--[if lt IE 9]>
<script src="scripts/ie9.js">IE7_PNG_SUFFIX=".png";</script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheets/style.css"> 
<link rel="stylesheet" href="stylesheets/responsive.css"> 
<link rel="stylesheet" href="stylesheets/nivoslider.css">
<script src="scripts/jquery.min.js"></script> 
<script src="scripts/jquery.bxSlider.min.js"></script>
<script src="scripts/jquery.nivo.slider.js"></script>
<script src="scripts/jquery.blackandwhite.min.js"></script>
<script src="scripts/js_func.js"></script>
<script>
$(function(){
	$('#slider').nivoSlider({
		controlNav: false
	});
	$('.post_slider').bxSlider({
		auto: false,
		speed : 1000
	});
	$('.clients_slider').bxSlider({
		auto: false,
		controls : false,
		mode: 'fade',
		pager: true
	});	
    $('.bwWrapper').BlackAndWhite({
        hoverEffect : true,
        webworkerPath : false,
        responsive:true,
        invertHoverEffect:false
    });
})
</script>
</head>
<body>
<div class="wraper">
 <header class="header">
  <a class="logo" href="index.html">construct</a>
  <nav>
  <!-- top menu -->
   <ul>
    <li><a href="index.html">Home</a>
     <ul>
      <li><a href="index2.html">Home Version 2</a></li>
      <li><a href="index3.html">Home Version 3</a></li>
      <li><a href="index4.html">Home Version 4</a></li>
      <li><a href="index5.html">Home Version 5</a></li>
      <li><a href="index6.html">Home Version 6</a></li>
      <li><a href="index7.html">Home Version 7</a></li>
      <li><a href="index8.html">Home Version 8</a></li>
     </ul>
    </li>
    
    <li><a href="about.html">Pages</a>
     <ul>
      <li><a href="about.html">About Us</a></li>
      <li><a href="team.html">Team</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="process.html">Process</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="contact_us.html">Contact Us</a></li>
      <li><a href="pricing.html">Pricing</a></li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="left_nav.html">Left Nav</a></li>
      <li><a href="left_sidebar.html">Left Sidebar</a></li>
      <li><a href="right_nav.html">Right Nav</a></li>
      <li><a href="right_sidebar.html">Right Sidebar</a></li>
      <li><a href="full_width.html">Full Width</a></li>
     </ul>
    </li>
    <li><a href="short_text.html">Portfolio</a>
     <ul>
      <li><a href="short_text.html">Short Text Layout</a>
       <ul>
        <li><a href="short_text.html">1 Column</a></li>
        <li><a href="short_text2.html">2 Column</a></li>
        <li><a href="short_text3.html">3 Column</a></li>
        <li><a href="short_text4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="long_text.html">Long Text Layout</a>
       <ul>
        <li><a href="long_text_wide.html">1 Column Wide</a></li>
        <li><a href="long_text.html">1 Column</a></li>
        <li><a href="long_text2.html">2 Column</a></li>
        <li><a href="long_text3.html">3 Column</a></li>
        <li><a href="long_text4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="filtered.html">Filtered Layout</a>
       <ul>
        <li><a href="filtered.html">1 Column</a></li>
        <li><a href="filtered2.html">2 Column</a></li>
        <li><a href="filtered3.html">3 Column</a></li>
        <li><a href="filtered4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="right_sidebar.html">Right Sidebar</a>
       <ul>
        <li><a href="right_sidebar.html">1 Column</a></li>
        <li><a href="right_sidebar2.html">2 Column</a></li>
        <li><a href="right_sidebar3.html">3 Column</a></li>
       </ul>
      </li>
      <li><a href="left_sidebar.html">Left Sidebar</a>
       <ul>
        <li><a href="left_sidebar.html">1 Column</a></li>
        <li><a href="left_sidebar2.html">2 Column</a></li>
        <li><a href="left_sidebar3.html">3 Column</a></li>
       </ul>
      </li>
      <li><a href="gallery.html">Gallery Style</a>
       <ul>
        <li><a href="gallery.html">1 Column</a></li>
        <li><a href="gallery2.html">2 Column</a></li>
        <li><a href="gallery3.html">3 Column</a></li>
        <li><a href="gallery4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="single_full.html">Portfolio Single Post</a>
       <ul>
        <li><a href="single_full.html">Full Width</a></li>
        <li><a href="single_right.html">Right Sidebar</a></li>
        <li><a href="single_left.html">Left Sidebar</a></li>
       </ul>
      </li>
     </ul>    
    </li>
    <li><a href="blog_post.html">Blog</a>
     <ul>
      <li><a href="blog_full_width.html">Full Width</a></li>
      <li><a href="blog_large.html">Large Image No Sidebar</a></li>
      <li><a href="blog_large_sidebar.html">Large Image With Sidebar</a></li>
      <li><a href="blog_medium_sidebar.html">Medium Image Right Sidebar</a></li>
     </ul>
    </li>
    <li><a href="shortcodes_typography.html">Shortcodes</a>
     <ul>
      <li><a href="shortcodes_typography.html">Typography</a></li>
      <li><a href="shortcodes_buttons_icons.html">Buttons</a></li>
      <li><a href="shortcodes_google_maps.html">Maps</a></li>
      <li><a href="shortcodes_content_sliders.html">Sliders</a></li>
      <li><a href="shortcodes_videos.html">Videos</a></li>
      <li><a href="shortcodes_pricing_tables.html">Tables</a></li>
      <li><a href="shortcodes_alerts_boxes.html">Boxes</a></li>
      <li><a href="shortcodes_accordions_tabs_toggles.html">Tabs</a></li>
     </ul>
    </li>
   </ul>
  <!-- /top menu -->
  </nav>
 </header>
</div> 

<!-- nivo slider -->
<div class="nivo-wrap">
<div class="wraper">
<!--<div class="fallback"><img src="images/sliders/home_page_4/fallback.png" alt="" /></div>-->
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
            	<img src="images/sliders/home_page_4/home4_slide_1.jpg" width="933" height="377" data-thumb="images/features/img.png" alt="" title="#htmlcaption" />
            	<img src="images/sliders/home_page_4/home4_slide_2.jpg" width="933" height="377" data-thumb="images/features/img.png" alt="" title="#htmlcaption2" />
            	<img src="images/sliders/home_page_4/home4_slide_3.jpg" width="933" height="377" data-thumb="images/features/img.png" alt="" title="#htmlcaption3" />
            	<img src="images/sliders/home_page_4/home4_slide_4.jpg" width="933" height="377" data-thumb="images/features/img.png" alt="" title="#htmlcaption4" />
            </div>
            <div id="htmlcaption" class="dd nivo-html-caption">
                <span class="tit">A responsive, business</span><strong class="tit2">HTML Template</strong> Lid est laborum dolo rumes fugats untras. Et harums ser quidem rerum facilis dolores uns satdips ipsums. 
            </div>
            <div id="htmlcaption2" class="dd nivo-html-caption">
                <span class="tit">A responsive, business</span><strong class="tit2">HTML Template</strong> Lid est laborum dolo rumes fugats untras. Et harums ser quidem rerum facilis dolores uns satdips ipsums. 
            </div>
            <div id="htmlcaption3" class="dd nivo-html-caption">
                <span class="tit">A responsive, business</span><strong class="tit2">HTML Template</strong> Lid est laborum dolo rumes fugats untras. Et harums ser quidem rerum facilis dolores uns satdips ipsums. 
            </div>
            <div id="htmlcaption4" class="dd nivo-html-caption">
                <span class="tit">A responsive, business</span><strong class="tit2">HTML Template</strong> Lid est laborum dolo rumes fugats untras. Et harums ser quidem rerum facilis dolores uns satdips ipsums. 
            </div>
        </div>
</div>
</div>
<!-- /nivo slider -->
 
<div class="content_block">
 <!-- text bar2 -->
 <div class="text_bar2">
  <div class="wraper">
   <h2>Like to blog?  Construct likes it too. This is our home page blog option!<span>Want to take a tour?  Check out the numerous options &amp; features that Construct includes, we know you'll love them!</span></h2>
   <a class="buy btn_l" href="#">Buy Construct!</a>
  </div>
 </div>
 <!-- /text bar2 -->
 <div class="wraper">
  <!-- blog entries -->
  <div class="blog_entries">
  
   <div class="post">
    <div class="img_wrap bwWrapper">
     <div class="date">April 2, 2012</div>
     <a href="blog_post.html"><img src="images/blog/blog_01.png" width="640" height="265" alt="" /></a>
    </div>
    <div class="desc">
     <h4><a href="blog_post.html">Being Creative Take a  Lot of Hard Work</a></h4>
     <p>Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermentum mas justo sitters amet risus. Cras mattis cosi sectetut amet fermens tum aecenas faucib sadips amets. Libero tempore, cum soluta nobis est eligen di optio cumque nihil impedit quo minus id quodsir maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus sadips ipsums fugiats vitae voluptas dolores amets untras ochoc neuav ...</p>
     <div class="metadata">
      <strong class="dots">....</strong>
      By <a href="#">Crucio</a>  |  <a href="#">Photoshop, Photography, Business, Corporate, Creative</a>  |  <a href="#">12 COMMENTS</a>
      <a href="blog_post.html" class="read_more btn_col">Read More</a>
     </div>   
    </div>   
   </div>
   
   <div class="post">
    <div class="img_wrap">
     <ul class="post_slider">
	  <li class="bwWrapper"><div class="date">April 2, 2012</div><img src="images/blog/blog_02.png" width="640" height="265" alt="" /></li>	
	  <li><iframe src="http://player.vimeo.com/video/1185749" width="640" height="265" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></li>	
	  <li class="bwWrapper"><div class="date">April 2, 2012</div><img src="images/blog/blog_03.png" width="640" height="265" alt="" /></li>	
	 </ul>
    </div>
    <div class="desc">
     <h4><a href="blog_post.html">Being Creative Take a  Lot of Hard Work</a></h4>
     <p>Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermentum mas justo sitters amet risus. Cras mattis cosi sectetut amet fermens tum aecenas faucib sadips amets. Libero tempore, cum soluta nobis est eligen di optio cumque nihil impedit quo minus id quodsir maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus sadips ipsums fugiats vitae voluptas dolores amets untras ochoc neuav ...</p>
     <div class="metadata">
      <strong class="dots">....</strong>
      By <a href="#">Crucio</a>  |  <a href="#">Photoshop, Photography, Business, Corporate, Creative</a>  |  <a href="#">12 COMMENTS</a>
      <a href="blog_post.html" class="read_more btn_col">Read More</a>
     </div>   
    </div>   
   </div>
   
   <div class="post">
    <div class="img_wrap">
     <iframe src="http://player.vimeo.com/video/1185749" width="640" height="265" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
    <div class="desc">
     <h4><a href="blog_post.html">Being Creative Take a  Lot of Hard Work</a></h4>
     <p>Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermentum mas justo sitters amet risus. Cras mattis cosi sectetut amet fermens tum aecenas faucib sadips amets. Libero tempore, cum soluta nobis est eligen di optio cumque nihil impedit quo minus id quodsir maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus sadips ipsums fugiats vitae voluptas dolores amets untras ochoc neuav ...</p>
     <div class="metadata">
      <strong class="dots">....</strong>
      By <a href="#">Crucio</a>  |  <a href="#">Photoshop, Photography, Business, Corporate, Creative</a>  |  <a href="#">12 COMMENTS</a>
      <a href="blog_post.html" class="read_more btn_col">Read More</a>
     </div>   
    </div>   
   </div>
   
  </div>
  <!-- /blog entries -->
  <!-- sidebar -->
  <div class="sidebar">
   <!-- most popular -->
   <div class="most_popular">
    <h4>Most Popular Blog Posts</h4>
    <ul>
     <li>
      <div class="bwWrapper"><a href="blog_post.html"><img src="images/blog/blog_23.png" width="60" height="55" alt="" /></a></div>
      <div class="desc">
       <p><strong><a href="blog_post.html">Being Creative Work</a></strong></p>
       <p>Sectetut amet fermens ...</p>
       <p><span>February 15th 2012   <a href="#">By Crucio</a></span></p>
      </div>
     </li>
     <li>
      <div class="bwWrapper"><a href="blog_post.html"><img src="images/blog/blog_24.png" width="60" height="55" alt="" /></a></div>
      <div class="desc">
       <p><strong><a href="blog_post.html">Being Creative Work</a></strong></p>
       <p>Sectetut amet fermens ...</p>
       <p><span>February 15th 2012   <a href="#">By Crucio</a></span></p>
      </div>
     </li>
     <li>
      <div class="bwWrapper"><a href="blog_post.html"><img src="images/blog/blog_25.png" width="60" height="55" alt="" /></a></div>
      <div class="desc">
       <p><strong><a href="blog_post.html">Being Creative Work</a></strong></p>
       <p>Sectetut amet fermens ...</p>
       <p><span>February 15th 2012   <a href="#">By Crucio</a></span></p>
      </div>
     </li>
    </ul>
   </div>
   <!-- /most popular -->
   <!-- acc tabs -->
   <div class="acc_tabs">
	<div id="tabs">
     <ul class="tab_select">
      <li><a href="#tab-1">Archives</a></li>
      <li><a href="#tab-2">Categories</a></li>
      <li><a href="#tab-3">Comments</a></li>
     </ul>
     <div id="tab-1">
      <ul>
       <li><a href="#">January 2012 (12)</a></li>
       <li><a href="#">February 2012 (12)</a></li>
       <li><a href="#">March 2012 (12)</a></li>
       <li><a href="#">April 2012 (12)</a></li>
       <li><a href="#">May 2012 (12)</a></li>
       <li><a href="#">June 2012 (12)</a></li>
       <li><a href="#">July 2012 (12)</a></li>
      </ul>
     </div>
     <div id="tab-2">
      <ul>
       <li><a href="#">Cat 1</a></li>
       <li><a href="#">Cat 2</a></li>
       <li><a href="#">Cat 3</a></li>
      </ul>
     </div>
     <div id="tab-3">
      <ul>
       <li><a href="#">Some comment</a></li>
       <li><a href="#">Some comment2</a></li>
       <li><a href="#">Some comment3</a></li>
      </ul>
     </div>
    </div>
   </div>
   <!-- /acc tabs -->
   <!-- latest tweets -->
   <div class="latest_tweets">
    <h4>Latest From The Twittersphere</h4>
    <ul>
     <li><a href="#">@crucio</a> what an incredible site!<br /><a href="#">less than a minute ago</a></li>
     <li><a href="#">@themesector</a> love this theme, tons of options, lots of goodies and crazy good support.  I cant ask for anything better!<br /><a href="#">about 3 hours ago</a></li>
     <li><a href="#">@themeforest</a> where do you get support for account issues?  <a href="#">http://t.co/sr324nLrQw</a><br /><a href="#">less than a minute ago</a></li>
    </ul>
   </div>
   <!-- /latest tweets -->
   <!-- our clients -->
   <div class="our_clients">
    <h4>Our Clients Just Love Us</h4>
     <ul class="clients_slider">
	  <li>
	   <blockquote>
	    <p>"Nam libero tempore, cum soluta nobis est eligendi optio cumque nihl impedit quois minus id quod maxime placeat facere rendus sit sadipsamets."</p>
	    <p>Jane Doe, CEO of Imperio</p>
	   </blockquote>
	  </li>	
	  <li>
	   <blockquote>
	    <p>"Cum soluta nobis est eligendi optio cumque nihl impedit quois minus id quod maxime placeait sadipsamets."</p>
	    <p>Jane Doe, CEO of Imperio</p>
	   </blockquote>
	  </li>	
	  <li>
	   <blockquote>
	    <p>"Libero tempore, cuendi optio cumque nihl impedit quois minus id quod maxime placeat facere rendus sit sadipsamets."</p>
	    <p>Jane Doe, CEO of Imperio</p>
	   </blockquote>
	  </li>	
	  <li>
	   <blockquote>
	    <p>"Nam libero tempore, cum soluta nobis es nihl impedit quois minus id quod maxime placeat facere rendus sit sadipsamets."</p>
	    <p>Jane Doe, CEO of Imperio</p>
	   </blockquote>
	  </li>	
	  <li>
	   <blockquote>
	    <p>"Am libero tempore, cum soluta nobis est eligendi optio cumque ipsamets."</p>
	    <p>Jane Doe, CEO of Imperio</p>
	   </blockquote>
	  </li>	
	 </ul>   
   </div>
   <!-- /our clients -->
  </div>
  <!-- /sidebar -->
 </div>
</div>

<!-- footer -->
<!-- social block -->
<div class="social_block">
 <div class="wraper">
  <p>Stay connected with us in your favorite flavor!</p>
  <ul>
   <li class="facebook"><a href="#">Facebook</a></li>
   <li class="twitter"><a href="#">Twitter</a></li>
   <li class="linkedin"><a href="#">LinkedIn</a></li>
   <li class="rss"><a href="#">RSS</a></li>
   <li class="dribbble"><a href="#">Dribbble</a></li>
   <li class="google"><a href="#">Google+</a></li>
  </ul>
 </div>
</div>
<!-- /social block -->

<div class="footer">
 <footer>
  <!-- bottom about -->
  <div class="bottom_about">
   <p><img src="images/logo.png" alt="" /></p>
   <p>At vero eos et accusaus et iusto unir un dignissimos ducimus quirds siter ters pi blranditiis praesentium amets voluptatum un deleniti atque corrupti quosdirs dolores etra quasir moltias unstw excepturi sinte amets occaecatires.</p>
  </div>
  <!-- /bottom about -->
  <!-- recent tweets -->
  <div class="recent_tweets">
   <h3><span>Recent Tweets</span></h3>
   <ul>
    <li><a href="#">@laurakalbag</a> I will be very soon. Ase result reco endation <a href="#">31 minutes ago</a></li>
    <li><a href="#">@laurakalbag</a> you got chocolates!? That's i I'm signing up. <a href="#">37 minutes ago</a></li>
   </ul>
  </div>
  <!-- /recent tweets -->
  <!-- recent posts -->
  <div class="recent_posts">
   <h3><span>Recent Posts</span></h3>
   <ul>
    <li><a href="#">Lorem ipsum dolo amet consecect</a></li>
    <li><a href="#">Sed laoreet neque nonte mauris </a></li>
    <li><a href="#">Metus lacus, porta vestibulum</a></li>
    <li><a href="#">Morbi ac magna est ornare eliticits</a></li>
    <li><a href="#">Voluptas sadips nemis un etras</a></li>
   </ul>
  </div>
  <!-- /recent posts -->
  <!-- subscribe block -->
  <div class="subscribe_block">
   <h3><span>Stay Connected</span></h3>
   <form method="post" action="#">
    <p><input type="text" id="name" value="NAME ..." /></p>
    <p><input type="text" id="email" value="EMAIL ..." /></p>
    <p><input type="submit" value="Subscribe" /></p>
   </form>
  </div>
  <!-- /subscribe block -->
 </footer>
</div>

<!-- copyright -->
<div class="copyright">
 <div class="wraper">
  <p><span>Copyright 2012 Construct</span>All Rights Reserved<a href="#">RSS</a><a href="#">Comments</a></p>
  <a class="top" href="#">Back to the top</a>
 </div>
</div>
<!-- /copyright -->
<!-- /footer -->
</body>
</html> 
